<template>
  <el-icon :size="30" @click="call">
    <Phone />
  </el-icon>
  <audio :ref="el_audio" />

  <el-dialog v-model="dialogVisible" :width="dialog_width" style="padding:0" draggable :modal="false" :overflow="true">
    <template #header>
      <div v-if="type === 'calling'" class="w-full h-full text-center text-[12px] p-0">{{ userStore.to_user.name }}
      </div>
      <div v-else class="w-full h-full text-center text-[12px] p-0">等待接听...</div>
    </template>
    <div class="w-full h-[600px] flex items-center justify-center flex-wrap">
      <div>
        <el-avatar v-if="!video" :size="80" :src="userStore.to_user['avatar']" />
        <div v-else class="w-full h-[500px] relative">
          <video class="w-44 h-20 absolute z-10 right-0" autoplay id="video1" />
          <video class="w-full h-full" autoplay id="video2" />
        </div>
      </div>
      <div class="w-full h-30 flex justify-center">
        <div v-if="type === 'receiver'" class="flex items-center justify-center *:m-5">
          <img class="w-[60px] h-[60px]" src="/receiver_close.svg" alt="1" @click="close">
          <img class="w-[50px] h-[50px]" src="/receiver_open.svg" alt="1" @click="receiver_open">
        </div>
        <div v-else-if="type === 'sender'" class="flex items-center justify-center *:m-5">
          <img class="w-[60px] h-[60px]" src="/receiver_close.svg" alt="1" @click="close">
        </div>
        <div v-else-if="type === 'calling'">
          <el-button size="large" v-if="audio" @click="audio_toggle" type="primary">
            <el-icon>
              <Microphone />
            </el-icon>
          </el-button>
          <el-button size="large" v-else @click="audio_toggle">
            <el-icon>
              <Mute />
            </el-icon>
          </el-button>
          <el-button size="large" v-if="video" @click="video_toggle" type="primary">
            <el-icon>
              <CameraFilled />
            </el-icon>
          </el-button>
          <el-button size="large" v-else @click="video_toggle">
            <img class="w-[14px] h-6" src="/video_close.svg" alt="1">
          </el-button>
          <el-button size="large" type="danger" @click="close">
            <img class="w-[14px] h-6" src="/un_call.svg" alt="1">
          </el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { onMounted, ref, watch, watchEffect } from 'vue'
import { Phone, Microphone, Mute, CameraFilled } from "@element-plus/icons-vue";
import { useIndexStore } from "@/store/main";
import { useUserStore } from "@/store/user";
import { ElMessage } from 'element-plus'
// import Peer from 'simple-peer'


const audio = ref(true)
const video = ref(false)
const dialogVisible = ref(false)

const indexStore = useIndexStore()
const userStore = useUserStore()
const socket = indexStore.get_socket()
const type = ref(null)

const dialog_width = ref('300')
let local_stream = ref()

const el_video_1 = ref(null)
const el_video_2 = ref(null)

onMounted(() => {
  // 开始通话
  socket.on('call', (data) => {
    console.log('收到了');
    if (data.user_id === userStore.user['_id']) {
      // 说明是发送者
      type.value = 'sender'
    } else {
      dialogVisible.value = true
      type.value = 'receiver'
      // remote_signal = data.signal
    }
  })
  // 接收者接听
  socket.on('receiver_open', (data) => {
    type.value = 'calling'
    // if (data.user_id === userStore.user['_id']){
    //   send_peer.signal(data.signal)
    // }else{

    // }
  })
  // 任意一方挂断
  socket.on('close', ({ user_id,to_user_id }) => {
    if (user_id === userStore.user['_id']) {
      ElMessage({
        dangerouslyUseHTMLString: true,
        message: '挂断了',
      })
      // on_peer.value.destroy()
      dialogVisible.value = false
    } else {
      ElMessage({
        dangerouslyUseHTMLString: true,
        message: '对方挂断了',
      })
      // on_peer.value.destroy()
      dialogVisible.value = false
    }
  })

  socket.on('video_toggle',data => {
    const video1 = document.querySelector('#video1')
    const video2 = document.querySelector('#video2')
    navigator.mediaDevices.getUserMedia({
      video:true,
      audio:true
    }).then(stream => {
      video1.srcObject = stream
      video2.srcObject = stream
    })
  })
})
// 开始通话
const call = () => {
  // navigator.mediaDevices.getUserMedia({
  //   video: true,
  //   audio:true
  // }).then(stream => {
  //   local_stream.value = stream
    // const peer = new Peer({
    //   initiator: true,
    //   stream: stream,
    //   trickle: false,
    // })
    
    // peer.on('signal',data => {
    //   socket.emit('call',{
    //     user_id: userStore.user['_id'],
    //     to_user_id: userStore.to_user['_id'],
    //     signal: data
    //   })
    // })

    // peer.on('stream',stream => {
    //   el_audio.value.srcObject = stream
    // })

    // on_peer.value = peer
  // })
  // .catch(e=>{
  //   console.log(e);
  // })
  dialogVisible.value = true
  socket.emit('call',{
        user_id: userStore.user['_id'],
        to_user_id: userStore.to_user['_id'],
      })
}
// 接收者挂断
const receiver_close = () => {
  dialogVisible.value = false
  socket.emit('close')
}
// 接收者接听
const receiver_open = () => {
  // navigator.mediaDevices.getUserMedia({
  //   video:true,
  //   audio: true
  // })                  
  // .then(stream => {
  //   local_stream.value = stream
    // const peer = new Peer({
    //   initiator:false,
    //   stream:stream,
    //   trickle:false
    // })
    
    // peer.on('signal',data => {
    //   socket.emit('receiver_open',{
    //     signal:data,
    //     user_id: userStore.user['_id'],
    //     to_user_id: userStore.to_user['_id']
    //   })
    // })
    

    // peer.on('stream',data => {
    //   el_audio.value.srcObject = data.signal
    // })

    // on_peer.value = peer
  // })
  socket.emit('receiver_open',{
        user_id: userStore.user['_id'],
        to_user_id: userStore.to_user['_id']
      })
}
// 发送者挂断
const sender_close = () => {
  dialogVisible.value = false
  socket.emit('close', { close_id: userStore.user['_id'] })
}
// 音频打开/关闭
const audio_toggle = () => {
  audio.value = !audio.value
}
// 视频打开/关闭
const video_toggle = () => {
  video.value = !video.value
  if (video.value){
    dialog_width.value = '800'
  }else{
    dialog_width.value = '300'
  }
  socket.emit('video_toggle',{
    is:video.value,
    user_id:userStore.user['_id'],
    to_user_id:userStore.to_user['_id']
  })
}
// 挂断
const close = () => {
  socket.emit('close', {
    user_id: userStore.user['_id'],
    to_user_id: userStore.to_user['_id']
  })
  dialogVisible.value = false
}
</script>

<style></style>
